<template>
    <div class="container"
         style="margin-top: 20px">
        <div class="row">
            <div class="col-3">
                <div class="card">
                    <div class="card-body">
                        <img :src="$store.state.user.photo"
                             alt=""
                             style="width: 100%;">
                    </div>
                </div>
            </div>
            <div class="col-9">
                <div class="card">
                    <div class="card-header">
                        <span style="font-size: 130%">我的Bot</span>
                        <button type="button"
                                class="btn btn-outline-primary float-end"
                                data-bs-toggle="modal"
                                data-bs-target="#add-bot-btn">
                            + 创建 Bot
                        </button>

                        <!-- Modal -->
                        <div class="modal fade"
                             id="add-bot-btn"
                             tabindex="-1">
                            <div class="modal-dialog modal-xl">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h1 class="modal-title fs-5">创建Bot</h1>
                                        <button type="button"
                                                class="btn-close"
                                                data-bs-dismiss="modal"
                                                aria-label="Close"></button>
                                    </div>
                                    <div class="modal-body">
                                        <div class="mb-3">
                                            <label for="add-bot-title"
                                                   class="form-label">名称</label>
                                            <input type="text"
                                                   v-model="botadd.title"
                                                   class="form-control"
                                                   id="add-bot-title"
                                                   placeholder="请输入Bot名称">
                                        </div>
                                        <div class="mb-3">
                                            <label for="add-bot-description"
                                                   class="form-label">简介</label>
                                            <textarea v-model="botadd.description"
                                                      class="form-control"
                                                      id="add-bot-description"
                                                      rows="3"
                                                      placeholder="请输入Bot简介"></textarea>
                                        </div>
                                        <div class="mb-3">
                                            <label for="add-bot-code"
                                                   class="form-label">代码</label>
                                            <VAceEditor v-model:value="botadd.content"
                                                        @init="editorInit"
                                                        lang="c_cpp"
                                                        :theme="aceConfig.theme"
                                                        style="height: 300px"
                                                        :options="aceConfig.options"
                                                        class="ace-editor" />

                                        </div>
                                    </div>
                                    <div class="modal-footer">
                                        <div class="error-message">{{ botadd.error_message }}</div>
                                        <button type="button"
                                                class="btn btn-secondary"
                                                data-bs-dismiss="modal">取消</button>
                                        <button type="button"
                                                class="btn btn-primary"
                                                @click="add_bot">创建</button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="card-body">
                            <table class="table table-striped table-hover"
                                   style="text-align: center;">
                                <thead>
                                    <tr>
                                        <th>名称</th>
                                        <th>创建时间</th>
                                        <th>修改时间</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr v-for="bot in bots"
                                        :key="bot.id">
                                        <td>{{ bot.title }}</td>
                                        <td>{{ bot.createTime }}</td>
                                        <td>{{ bot.modifyTime }}</td>
                                        <td>
                                            <button type="button"
                                                    class="btn btn-outline-secondary btn-sm"
                                                    style="margin-right: 10px"
                                                    data-bs-toggle="modal"
                                                    :data-bs-target="'#update-bot-modal-' + bot.id">修改</button>
                                            <button type="button"
                                                    class="btn btn-outline-danger btn-sm"
                                                    @click="remove_bot(bot)">删除</button>

                                            <div class="modal fade"
                                                 :id="'update-bot-modal-' + bot.id"
                                                 tabindex="-1">
                                                <div class="modal-dialog modal-xl">
                                                    <div class="modal-content">
                                                        <div class="modal-header">
                                                            <h1 class="modal-title fs-5">修改Bot</h1>
                                                            <button type="button"
                                                                    class="btn-close"
                                                                    data-bs-dismiss="modal"
                                                                    aria-label="Close"></button>
                                                        </div>
                                                        <div class="modal-body">
                                                            <div class="mb-3">
                                                                <label style="float: left;"
                                                                       for="update-bot-title"
                                                                       class="form-label">名称</label>
                                                                <input type="text"
                                                                       v-model="bot.title"
                                                                       class="form-control"
                                                                       id="update-bot-title"
                                                                       placeholder="请输入Bot名称">
                                                            </div>
                                                            <div class="mb-3">
                                                                <label style="float: left;"
                                                                       for="update-bot-description"
                                                                       class="form-label">简介</label>
                                                                <textarea v-model="bot.description"
                                                                          class="form-control"
                                                                          id="update-bot-description"
                                                                          rows="3"
                                                                          placeholder="请输入Bot简介"></textarea>
                                                            </div>
                                                            <div style="text-align: left"
                                                                 class="mb-3">
                                                                <label for="add-bot-code"
                                                                       class="form-label">代码</label>
                                                                <VAceEditor v-model:value="bot.content"
                                                                            @init="editorInit"
                                                                            lang="c_cpp"
                                                                            :theme="aceConfig.theme"
                                                                            style="height: 300px"
                                                                            :options="aceConfig.options"
                                                                            class="ace-editor" />
                                                            </div>
                                                        </div>
                                                        <div class="modal-footer">
                                                            <div class="error-message">{{ bot.error_message }}</div>
                                                            <button type="button"
                                                                    class="btn btn-secondary"
                                                                    data-bs-dismiss="modal">取消</button>
                                                            <button type="button"
                                                                    class="btn btn-primary"
                                                                    @click="update_bot(bot)">修改</button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                            <span class="text">Bot 创建数量 {{ currentCount }} / 10</span>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script >
import { ref, reactive } from 'vue';
import $ from 'jquery'
import { Modal } from 'bootstrap/dist/js/bootstrap';
import { VAceEditor } from 'vue3-ace-editor';
import "ace-builds/webpack-resolver";
import 'ace-builds/src-noconflict/mode-json';
import 'ace-builds/src-noconflict/theme-chrome';
import 'ace-builds/src-noconflict/ext-language_tools';
import { useStore } from 'vuex';


export default {
    components: {
        VAceEditor
    },

    setup () {
        const aceConfig = reactive({
            theme: 'chrome', //主题
            arr: [
                /*所有主题*/
                "ambiance",
                "chaos",
                "chrome",
                "clouds",
                "clouds_midnight",
                "cobalt",
                "crimson_editor",
                "dawn",
                "dracula",
                "dreamweaver",
                "eclipse",
                "github",
                "gob",
                "gruvbox",
                "idle_fingers",
                "iplastic",
                "katzenmilch",
                "kr_theme",
                "kuroir",
                "merbivore",
                "merbivore_soft",
                "monokai",
                "mono_industrial",
                "pastel_on_dark",
                "solarized_dark",
                "solarized_light",
                "sqlserver",
                "terminal",
                "textmate",
                "tomorrow",
                "tomorrow_night",
                "tomorrow_night_blue",
                "tomorrow_night_bright",
                "tomorrow_night_eighties",
                "twilight",
                "vibrant_ink",
                "xcode",
            ],
            readOnly: false, //是否只读
            options: {
                enableBasicAutocompletion: true,
                enableSnippets: true,
                enableLiveAutocompletion: true,
                tabSize: 2,
                showPrintMargin: false,
                fontSize: 16
            }
        });

        const store = useStore();
        let bots = ref([]);
        let currentCount = ref();

        const botadd = reactive({
            title: "",
            description: "",
            content: "",
            error_message: "",
        });

        const refresh_bots = () => {
            $.ajax({
                // url: "https://cloudwebsite/api/user/bot/getlist/",
                url: "http://127.0.0.1:3000/api/user/bot/getlist/",
                type: "GET",
                headers: {
                    Authorization: "Bearer " + store.state.user.token,
                },
                success (resp) {
                    bots.value = resp;
                    currentCount.value = bots.value.length;
                }
            });
        };

        refresh_bots();

        const add_bot = () => {
            botadd.error_message = "";
            $.ajax({
                // url: "https://cloudwebsite/api/user/bot/add",
                url: "http://127.0.0.1:3000/api/user/bot/add",
                type: "POST",
                data: {
                    title: botadd.title,
                    description: botadd.description,
                    content: botadd.content,
                },
                headers: {
                    Authorization: "Bearer " + store.state.user.token,
                },
                success (resp) {
                    if (resp.error_message === "success") {
                        botadd.title = "";
                        botadd.description = "";
                        botadd.content = "";
                        Modal.getInstance("#add-bot-btn").hide();
                        refresh_bots();
                    } else {
                        botadd.error_message = resp.error_message;
                    }
                },
            });
        }

        const update_bot = (bot) => {
            botadd.error_message = "";
            $.ajax({
                // url: "https://cloudwebsite/api/user/bot/update/",
                url: "http://127.0.0.1:3000/api/user/bot/update/",
                type: "post",
                data: {
                    bot_id: bot.id,
                    title: bot.title,
                    description: bot.description,
                    content: bot.content,
                },
                headers: {
                    Authorization: "Bearer " + store.state.user.token,
                },
                success (resp) {
                    if (resp.error_message === "success") {
                        Modal.getInstance("#update-bot-modal-" + bot.id).hide();
                        refresh_bots();
                    } else {
                        bot.error_message = resp.error_message;
                    }
                },
            });
        }

        const remove_bot = (bot) => {
            $.ajax({
                // url: "https://cloudwebsite/api/user/bot/remove/",
                url: "http://127.0.0.1:3000/api/user/bot/remove/",
                type: "post",
                data: {
                    bot_id: bot.id,
                },
                headers: {
                    Authorization: "Bearer " + store.state.user.token,
                },
                success (resp) {
                    if (resp.error_message === "success") {
                        refresh_bots();
                    }
                },
            });
        }

        const dataForm = reactive({
            textareashow: '{"A":"A1"}'
        });

        const jsonError = (e) => {
            console.log(`JSON字符串错误：${e.message}`);
        }

        const editorInit = () => {
            try {
                dataForm.textareashow = JSON.stringify(JSON.parse(dataForm.textareashow), null, 2)
            } catch (e) {
                jsonError(e)
            }
        };

        return {
            bots,
            currentCount,
            botadd,
            add_bot,
            update_bot,
            remove_bot,
            editorInit,
            aceConfig,
        }

    }

}

</script>

<style scoped>
div.error-message {
    color: red;
    margin-right: 20px;
}

.text {
    float: right;
    margin: 10px;
    font-size: 16px;
    color: rgb(153, 162, 170);
}
</style>